<template>
  <ErrorBoundary>
    <el-config-provider :locale="zhCn" :size="appStore.size">
      <RouterView v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </RouterView>
    </el-config-provider>
  </ErrorBoundary>
  <div class="fixed bottom-0 left-0 bg-black text-white p-2 z-50 text-xs">
    当前断点:
    <span class="inline sm:hidden">xs</span>
    <span class="hidden sm:inline md:hidden">sm</span>
    <span class="hidden md:inline lg:hidden">md</span>
    <span class="hidden lg:inline xl:hidden">lg</span>
    <span class="hidden xl:inline 2xl:hidden">xl</span>
    <span class="hidden 2xl:inline">2xl</span>
  </div>
  
</template>

<script setup lang="ts">
import { ref, onMounted,defineAsyncComponent } from "vue";
import { useAppStore } from "@/stores/app";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const appStore = useAppStore();
const ErrorBoundary = defineAsyncComponent(
  () => import("@/components/ErrorBoundary.vue")
);

// 更优雅的加载状态处理
const showInitialLoading = ref(true);
onMounted(() => {
  setTimeout(() => {
    showInitialLoading.value = false;
  }, 1000); // 确保至少显示1秒避免闪烁
});
</script>

<style scoped>
/* 页面切换动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;will-change: opacity, transform;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
